<!DOCTYPE html>
<html>
<head>
    <title> </title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html , body {
            height: 100%;
            overflow: hidden;
        }
        #wrap {
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 50px;
            height: 50px;

        }
        .inner {
            position: absolute;
            margin: 4px;
        }
        .inner img {
            position: absolute;
            width: 42px;
            height: 42px;
            transition: 1s;
            border-radius: 50%;

        }
        .home {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url(./img/home.png);
            border-radius: 50%;
            transition: 1s;

        }
    </style>
</head>
<body>
    <input type="text" id = 'speed' name="">
    <button onclick= "changeSpeed(speed.value)">
        点击
    </button>
    

    <div id = 'wrap'>   
        <div class = 'inner'>
            <img src="./img/clos.png">
            <img src="./img/full.png">
            <img src="./img/open.png">
            <img src="./img/prev.png">
            <img src="./img/refresh.png">
        </div>
        <div class = 'home'>
        </div>
    </div>

    <script >   
            var homeNode = document.querySelector(".home")
            var valid = false;
            var imgNodes = document.querySelectorAll('img')
            homeNode.onclick = function () {
                valid = !valid
                if(valid) {
                    var ang = 360 * 10 ;
                    this.style.transform = 'rotate(3600deg)'    
                } else {
                    this.style.transform = 'rotate(-3600deg)'
                }
                transformBehaving(imgNodes, valid)
            }

            changeSpeed =  function (speed) {

                for (var i =0; i < imgNodes.length ; i++) {
                    imgNodes[i].style.transition = speed + 's'
                }
                homeNode.style.transition = speed + 's'

            }


            function transformBehaving(nodes,out) {
                
                if(!out) {
                    for (var i =0; i < nodes.length ; i++) {
                        nodes[nodes.length - i - 1].style.transition = '1s ' + (0.15 * i) + 's'
                        nodes[i].style.transform = `translate(0px, 0px) rotate(-360deg)`

                    }
                    return
                }
                var inc = 90 / (nodes.length - 1)
                for (var i =0; i < nodes.length ; i++) {
                    nodes[i].style.transition = 1 + 's ' + (0.15 * i) +'s'
                    var translate = getTranslate(inc * i, 150)
                    nodes[i].style.transform = `translate(-${translate.translateX}px, -${translate.translateY}px) rotate(360deg)`
                    if(!nodes[i].outStatus) {
                    	nodes[i].outStatus = nodes[i].style.transform
                    }
                    
                }

            }

            function getTranslate(deg,r) {

                var x =  Math.sin((Math.PI / 180 * deg )) * r
                var y =  Math.cos((Math.PI / 180 * deg )) * r
                return  {translateX : x, translateY: y}
            }
            fn = function() {
    			var temp = this.style.transform 
    			this.style.transition = '0.4s'
    			this.style.transform = temp + ' scale(2)'
    			this.style.opacity = 0.4
    			this.addEventListener('transitionend', function() {
    				this.style.transform = this.outStatus
    				this.removeEventListener('transitionend', fn)
    				this.style.opacity = 1
    			})
    		}

            registerFunction = function ()  {
            	for(var i = 0; i < imgNodes.length; i++) {
            		imgNodes[i].addEventListener('click', fn)

            	}
            }
            registerFunction()

    </script>

</body>
</html>